.key-wrapper {
    margin: 80px auto 0px;
    text-align: center;
    width: 1000px;
}
ul {
    text-align: center;
    white-space : nowrap;
    margin-top: 1em;
}
li {
    display: inline-block;
    margin: -0.5vmin 0.75vmin;
    width: 5vmin;
    height: 5vmin;
    padding: 1vmin;
    border: 0.25vmin solid rgb(75, 75, 75);
    border-radius: 3vmin;
    line-height: 5vmin;
    text-align: center;
    text-transform: uppercase;
    user-select: none;
    transition: .5s;
}
li:hover {
    cursor: pointer;
    color: rgb(255, 255, 255);
}
[data-code="32"]  {
    width: 40vmin;
}
.active {
    transition: 0s;
    transform: scale(1.15);
}
.drum {
    border-color: #103C48;
    color: #496169;
} .drum.active {
    color: rgb(75, 75, 75);
    background-color: #103C48;
}  .effect {
    border-color: #CE6D39;
    color: #CE6D39;
} .effect.active {
    color: rgb(75, 75, 75);
    background-color: #CE6D39;
}